<template>
  <div>
    <!-- 用户列管理的列表组件 -->
    <!-- <button @click="userlist">点击</button> -->
    <div>
      <!-- 列表渲染 -->
      <el-table
        :data="userslist"
        border
        style="width: 100%"
        :header-cell-style="{
          height: '32px' + '!important',
          padding: '2px',
        }"
      >
        <el-table-column prop="id2" label="#" width="60"> </el-table-column>
        <el-table-column prop="username" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>

        <el-table-column prop="mobile" label="电话" width="180">
        </el-table-column>
        <!-- <el-table-column prop="m" label="电话" width="180">
        </el-table-column> -->
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <!-- 切换 -->
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="modifyState(scope)"
            >
            </el-switch>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column prop="address" label="管理">
          <template slot-scope="scope">
            <el-button
              @click="editx(scope)"
              type="primary"
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              @click="deleit(scope)"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 编辑的操作 -->
      <div>
        <el-dialog title="添加用户" :visible.sync="condition" width="60%">
          <div>
            <!-- 表单验证 -->
            <el-form
              :model="editlist"
              :rules="rules"
              ref="editlist"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- 用户名 -->
              <el-form-item label="能编辑用户名" prop="">
                <el-input
                  v-model="editlist.username"
                  :disabled="true"
                ></el-input>
              </el-form-item>

              <!-- 邮箱 -->
              <el-form-item label="编辑邮箱" prop="email">
                <el-input v-model="editlist.email"></el-input>
              </el-form-item>
              <!-- 电话 -->
              <el-form-item label="编辑电话" prop="mobile">
                <el-input v-model="editlist.mobile"></el-input>
              </el-form-item>
              <!-- 结束 -->
            </el-form>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button>取 消</el-button>
            <el-button type="primary" @click="submitForm('editlist')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <p></p>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @prev-click="hanp"
          @next-click="hann"
          :current-page="pagenum"
          :page-sizes="[1, 3, 5, 7, 10]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["userlistv", "queryx"],
  data() {
    return {
      condition: false, //编辑框出现
      userslist: [],
      query: "", //查询关键字
      pagenum: 1, //当前页
      pagesize: 5, //每页数据条，
      total: 0, //总数
      value: false,
      editlist: [], //编辑数据
      idn: -1, //删除的id
      rules: {
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],

        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入电话", trigger: "blur" },
          //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.userlist();
  },
  methods: {
    modifyState(list) {
      //修改状态

      this.$axios
        .put(
          `https://www.liulongbin.top:8888/api/private/v1/users/${list.row.id}/state/${list.row.mg_state}`
        )
        .then((res) => {
          //  如果状态改变
          if (res.meta.status == "200") {
            // 提示框
            this.$message.success(res.meta.msg);
            // 重新求情数据
            this.userlist();
          } else {
            // 不成功 则警告框
            this.$message.warning(res.meta.msg);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.warning("当前网络状态不佳修改未同步至，请稍后再试");
        });
    },
    userlist() {
      // 获取用户列表
      this.userslist = [];
      this.$axios
        .get(
          `https://www.liulongbin.top:8888/api/private/v1/users?query=${this.queryx}&pagenum=${this.pagenum}&pagesize=${this.pagesize}`
        )
        .then((user) => {
          //如果状态码==200
          if (user.meta.status == "200") {
            // 赋值
            let list = user.data;
            // 获取总条数
            this.total = list.total;
            // 获取用户列表
            for (var i = 0; i < list.users.length; i++) {
              list.users[i].id2 = i + 1;
            }
            // 数据于模板发生关系
            this.userslist = list.users;

            // 成功提示
            this.$message({
              message: user.meta.msg,
              type: "success",
            });
          }
        });
    },
    editx(rem) {
      //编辑的操作

      // 获取要编辑的数据
      this.$axios
        .get(
          "https://www.liulongbin.top:8888/api/private/v1/users/" + rem.row.id
        )
        .then((data) => {
          if (data.meta.status == "200") {
            //赋值
            this.editlist = data.data;
            console.log(data);
            // 表单出现吧
            this.condition = true;
            //提示何在
          }
          if (data.meta.status != "200") {
            this.$message(data.meta.msg);
          }
        });
    },
    // 编辑数据2
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let da = new Object();
          da.email = this.editlist.email;
          da.mobile = this.editlist.mobile;
          console.log(da);
          // 发起请求
          this.$axios
            .put(
              "https://www.liulongbin.top:8888/api/private/v1/users/" +
                this.editlist.id,
              da
            )
            .then((data) => {
              console.log(data);
              if (data.meta.status == "200") {
                //赋值
                // 关闭表单

                this.condition = false;
                // 提示 何在
                this.$message({
                  message: data.meta.msg,
                  type: "success",
                });
                // 重新调用
                this.userlist();
              }
            });
        } else {
          return false;
        }
      });
    },
    deletex() {
      //删除数据2
      this.$axios
        .delete(
          `https://www.liulongbin.top:8888/api/private/v1/users/${this.idn}`
        )
        .then((res) => {
          //提示弹框
          if (res.meta.status == "200") {
            this.$message({
              message: res.meta.msg,
              type: "success",
            });
            // 调用刷新
            this.userlist();
            return false;
          }
          this.$message({
            type: "info",
            message: res.meta.msg,
          });
        });
    },
    deleit(scop) {
      //删除
      this.idn = scop.row.id;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletex();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(unm) {
      //修改每页条数

      this.pagesize = unm;
      this.userlist();
    },
    handleCurrentChange(unm) {
      //修改页

      this.pagesize = unm;
      -this.userlist();
    },
    hann() {
      //减减
      this.pagenum++;
      this.userlist();
      console.log(this.pagesize);
    },
    hanp() {
      //加加
      this.pagenum--;
      this.userlist();
    },
  },
  watch: {
    //状态发生改变时 在此请求数据
    userlistv: {
      handler() {
        this.userlist();
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
</style>